<template>
	<view>
		<view class="list list1 list2" style="flex-wrap: wrap;">
			<view class="person" v-for="(item, index) in manlist" :key="index">
				<view class="head_img">
					<image v-bind:src="item.avatar?item.avatar:avatar" @click="detailsData(item.user_id)"></image>
				</view>
				<view class="name">{{item.nickname}}</view>
			</view>
			<view class="person">
				<view class="head_img" @tap="tianjia">
					<image src="../../static/image/tianjia_21.png"></image>
				</view>
			</view>
			<view class="person">
				<view class="head_img" @tap="tichu">
					<image src="../../static/image/jianqu_31.png"></image>
				</view>
			</view>
		</view>
		<view class="list bot list1 list3">
			<view class="list2 bot1 bot2 bot3" @click="changeGroupName">
				<view>群聊名称</view>
				<view class="qun">
					<view class="pad">{{groupmsg.name}}</view>
					<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
				</view>
			</view>
			<view class="list2 bot1 bot2 bot3" @click="myDetails">
				<view>我在本群的信息</view>
				<view class="qun">
					<view class="pad">{{groupmsg.mynickname?groupmsg.mynickname:'未命名'}}</view>
					<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
				</view>
			</view>
			<view class="list2 bot1 bot2 bot3" @click="groupCode">
				<view>群二维码</view>
				<view class="qun">
					<image class="ewm" src="../../static/image/erweima_31.png"></image>
					<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
				</view>
			</view>
			<view class="list2 bot1 bot2 bot3" @click="groupAnnouncement">
				<view>群公告</view>
				<view class="qun">
					<view class="pad"></view>
					<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
				</view>
			</view>
			<view class="list2 bot1 bot2" @click="groupManagement">
				<view>群管理</view>
				<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
			</view>
		</view>
		<view class="list list1 list2 bot bot1" @click="searchChat">
			<view>查找聊天内容</view>
			<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
		</view>
		<view class="list bot list1 list3">
			<view class="list2 bot1 bot2 bot3">
				<view>置顶聊天</view>
				<switch class='blue' @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
			<view class="list2 bot1 bot2 bot3">
				<view>消息免打扰</view>
				<switch class='blue' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
			</view>
			<!-- <view class="list2 bot1 bot2">
				<view>保存到通讯录</view>
				<switch class='blue' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
			</view> -->
		</view>
		<view class="list list1 list2 bot bot1" @click="complaints">
			<view>加密</view>
			<view class="jiami">
				<view><image src="../../static/image/shou_guan_21.png"></image></view>
				<!-- <view><image src="../../static/image/shou_kai_21.png"></image></view> -->
			</view>
		</view>
		<view class="list list1 list2 bot bot1" @click="complaints">
			<view>投诉</view>
			<image src="../../static/image/fanhui_21.png" class="fanhui"></image>
		</view>
		<view class="list list1 list2 bot bot1" @click="deletes">
			<view>清空聊天记录</view>
		</view>
		<view class="list shanchu">删除并退出</view>
		<view class="cu-modal" :class="modalName==1?'show':''">
			<view class="cu-dialog">
				<view class="quanxian">只有群主才有此权限</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchA: false,
				switchB: false,
				switchC: true,
				group_id:'',
				is_zhu:1,
				groupmsg:[],
				manlist:[],
				avatar:uni.getStorageSync('noavatar'),
				stu: 1, //群主标识
				modalName: 2 //判断模态框是否显示
			}
		},
		onLoad(options){
			this.group_id = options.group_id;
		},
		onShow() {
			this.$msgchat.initwork();
			this.initDat();
		},
		methods: {
			//初始化数据
			initDat(){
				var obj = {
					token: uni.getStorageSync('token'),
					group_id:this.group_id
				}
				this.$common.requests('/api/Group/groupmesg', obj).then(res => {
					if(res.data.code==1){
						for(var i=0;i < res.data.data.manlist.length;i++ ){
							// this.avatar = res.data.data[i].userinfo.avatar;
							if(res.data.data.manlist[i].avatar){
								res.data.data.manlist[i].avatar =  this.$common.baseUrl + res.data.data.manlist[i].avatar;
							}else{
								res.data.data.manlist[i].avatar = '';
							}
						}
						
						this.manlist = res.data.data.manlist;
						this.groupmsg = res.data.data.group;
						this.switchA = res.data.data.grouptop==1?false:true;
						this.switchB = res.data.data.nonews==1?false:true;
						this.is_zhu = res.data.data.is_zhu;
						this.stu = res.data.data.is_zhu;
					}else{
						this.$api.msg(res.data.msg);
						return;
					}
					
				})
			},
			//跳转个人中心
			detailsData(uid){
				uni.navigateTo({
					url: '/pages/detailsData/detailsData_qun?friend_id=' + uid + '&ty=3'
				})
			},
			SwitchA(e) {
				this.switchA = e.detail.value
				var obj = {
					token: uni.getStorageSync('token'),
					group_id:this.group_id,
					status:e.detail.value?2:1
				}
				this.$common.requests('/api/Group/grouptop', obj).then(res => {
					// console.log(res)
					if(res.data.code==1){
						this.$api.msg(res.data.msg);
						return;
					}else{
						this.$api.msg(res.data.msg);
						return;
					}
				})
			},
			SwitchB(e) {
				this.switchB = e.detail.value
				var obj = {
					token: uni.getStorageSync('token'),
					group_id:this.group_id,
					nonews:e.detail.value?2:1
				}
				this.$common.requests('/api/Group/setnonews', obj).then(res => {
					// console.log(res)
					if(res.data.code==1){
						this.$api.msg(res.data.msg);
						return;
					}else{
						this.$api.msg(res.data.msg);
						return;
					}
					
				})
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			//隐藏模态框
			hideModal(e) {
				this.modalName = 2
			},
			//群聊名称
			changeGroupName() {
				uni.navigateTo({
					url: '../changeGroupName/changeGroupName?group_id='+this.group_id+'&name='+this.groupmsg.name+'&iszhu='+this.is_zhu
				})
			},
			//我在本群的信息
			myDetails() {
				uni.navigateTo({
					url: '../myDetails/myDetails?group_id='+this.group_id+'&myname='+this.groupmsg.mynickname
				})
			},
			//群二维码
			groupCode() {
				uni.navigateTo({
					url: '../groupCode/groupCode?groupnum='+this.groupmsg.groupnum
				})
			},
			//群公告
			groupAnnouncement() {
				if (this.stu == 1) {
					this.modalName = 1
				}
				uni.navigateTo({
					url: '../groupAnnouncement/groupAnnouncement?group_id=' + this.group_id +'&stu=' + this.stu
				})
				
			},
			//群管理
			groupManagement(){
				if (this.stu == 1) {
					this.modalName = 1
				}else{
					uni.navigateTo({
						url: '../groupManagement/groupManagement?group_id='+this.group_id
					})
				}
			},
			//查找聊天内容
			searchChat() {
				uni.navigateTo({
					url: '../searchChat/searchChat?group_id='+this.group_id
				})
			},
			//投诉
			complaints() {
				uni.navigateTo({
					url: '../complaints/complaints?group_id='+this.group_id
				})
			},
			//清空聊天记录
			deletes() {
				uni.showModal({
					title: '',
					content: '确认清除当前对话的聊天记录？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//添加群成员
			tianjia(){
				uni.navigateTo({
					url: '/pages/selectContacts/addBuildGroup?group_id='+ this.group_id +'&ty=2'
				})
			},
			//提出群成员
			tichu(){
				uni.navigateTo({
					url: '/pages/selectContacts/addBuildGroup?group_id='+ this.group_id+'&ty=3'
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100vw;
		background: #F5F4F9;
	}

	.list {
		background: #FFF;
		padding: 25upx 30upx;
	}

	.list1 {
		border-top: 1px solid #E8E8E8;
		border-bottom: 1px solid #E8E8E8;
	}

	.list2 {
		display: flex;
		justify-content: flex-start;
	}

	.person {
		width: 20%;
		text-align: center;
	}

	.head_img {
		width: 80%;
		padding-top: 80%;
		position: relative;
		left: 10%;
	}

	.head_img image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		border-radius: 50%;
	}

	.name {
		font-size: 30upx;
		margin-top: 10upx;
	}

	.bot {
		margin-top: 25upx;
		letter-spacing: 3upx;
	}

	.fanhui {
		width: 20upx;
		height: 30upx;
	}

	.bot1 {
		align-items: center;
		justify-content: space-between;
		padding: 35upx 30upx;
	}

	.bot2 {
		padding: 30upx 0;
	}

	.bot3 {
		border-bottom: 1px solid #E8E8E8;
	}

	.list3 {
		padding: 0 30upx;
	}

	.jiami view image {
		width: 25upx;
		height: 30upx;
	}
	.qun{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.pad{
		padding-right: 15upx;
		color: #787878;
	}
	.ewm{
		width: 40upx;
		height: 40upx;
		margin-right: 15upx;
	}
	.jiami view image {
		width: 25upx;
		height: 30upx;
	}
	
	.jiamis {
		padding: 20upx 30upx;
	}
	.shanchu{
		margin: 25upx 0 70upx 0;
		padding: 35upx 30upx;
		text-align: center;
	}
	.quanxian {
		padding: 100upx 0;
		background: #FFF;
		border-bottom: 1px solid #E8E8E8;
		font-weight: 600;
	}
	
	.solid-left {
		color: #4C68FF;
	}
</style>
